<template>
    <div class="container">
        <div class="row">
            <div class="col-xs-9">
                <div class="edit_container">
                    <quill-editor 
                        v-model="editform.content" 
                        ref="myQuillEditor" 
                        :options="editorOption" 
                        @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                        @change="onEditorChange($event)">
                    </quill-editor>
                </div>
                
                
                
            </div>
            <div class="col-xs-3">
                <el-card>
                    <div>
                        <span class="title">有趣的贴名</span>
                        <el-input v-model="editform.title"></el-input>
                    </div>
                    <div class="row">
                        
                        <el-button type="success" ><span><i class="fa fa-handshake-o" aria-hidden="true"></i></span>&nbsp加入我们</el-button>
                        <el-button type="primary" @click="post" ><span><i class="fa fa-pencil" aria-hidden="true"></i></span>&nbsp发帖</el-button>
                        
                    </div>
                    
                </el-card>
            </div>
        </div>
       
    </div>
    
</template>
<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
    components: {
        quillEditor
    },
    data() {
        return {
          
            editorOption: {},
            editform:{
                content:'',
                title:'',
                user_id:''
            }
        }
    },
    methods: {
        onEditorReady(editor) { // 准备编辑器
 
        },
        onEditorBlur(){}, // 失去焦点事件
        onEditorFocus(){}, // 获得焦点事件
        onEditorChange(){}, // 内容改变事件
        async post(){
            this.editform.user_id = window.sessionStorage.getItem('token')
            console.log(this.editform)
            const {data:res} = await this.$http.post('edit/',this.editform)
            this.$router.push({path:'/talk'})
        }
    },
    computed: {
        editor() {
            return this.$refs.myQuillEditor.quill;
        },
    }
}
</script>
<style lang="less" scoped>
.title{
    font-family: "Helvetica";
    font-size:20px
}
.sure{
    padding:10px;
}
.row{
margin-right: -14px;
    margin-left: -5px;
    padding: 5px;
}
</style>